<template>
	<div class="maskCenter">
		<div :class="windowShow ? 'businessDialog middle' : 'businessDialog-hide'">
			<div class="dialog-header" v-winmove>
				<span>{{ titleName }}</span>
				<span class="icon iconfont iconbiaoqianlan-guanbi" @click="close"></span>
			</div>
			<div class="dialog-body">
				<div class="businessInput" style="width: 100%; margin-bottom: 8px">
					<label class="name" style="width: 60px; text-align: left">类别</label>
					<el-input type="text" v-model="form.docType" class="myInput" readonly :disabled="isBrowse"></el-input>
				</div>
				<div class="businessInput mini" style="width: 100%; margin-bottom: 8px">
					<label class="name">上传附件</label>
					<el-input type="text" v-model="form.fileName" class="myInput" readonly :disabled="isBrowse"></el-input>
					<el-upload class="upload-demo" style="width: 30px; height: 32px" ref="upload" action="address" :on-preview="handlePreview"
					 :on-remove="handleRemove" :file-list="fileList" :on-change="handleChange" :auto-upload="false" :disabled="isBrowse"
					 :show-file-list="false">
						<span class="icon iconfont icongonggong_gengduo_16" slot="trigger" style="line-height: 32px; color: #939599"></span>
					</el-upload>
				</div>
				<div class="businessInput" style="width: 100%; height: 120px">
					<label class="name" style="height: 136px">附件描述</label>
					<el-input type="textarea" placeholder="请输入内容" v-model="form.note" class="myInput" resize="none" :disabled="isBrowse"></el-input>
				</div>
			</div>
			<div class="dialog-footer right">
				<span class="businessButtonCancel" style="margin-right: 20px" @click="close">取消</span>
				<span :class="[
            !isBrowse
              ? 'businessButtonConfirm'
              : 'businessButtonConfirm disabled',
          ]"
				 @click="submitUpload">保存</span>
			</div>
		</div>
	</div>
</template>


<script>
	import winmove from "@/directives/winmove";
	import {
		fileAdd,
		fileUpdata,
		fileDetail
	} from "@/system/api/attachment";
	export default {
		name: "definitionDetail",
		directives: {
			winmove,
		},
		components: {},
		props: {
			fileType: {},
			isBrowse: {},
			id: {
				default: "",
			},
			mid: {
				default: "",
			},
			titleName: {
				default: "承包合同附件",
			},
			tableName: {
				default: "",
			},
			fieldName: {
				default: "",
			},
			isRead: {
				default: false,
			},
			gcId: {
				default: "",
			},
			xmId: {
				default: "",
			},
			deptId: {
				default: "",
			},
			fjParam: {
				default: null,
			},
		},
		data() {
			return {
				address: "",
				fileList: [],
				windowShow: true,
				file: "",
				form: {
					docType: "",
					fileName: "",
					note: "",
				},
			};
		},
		methods: {
			handleChange(files, fileList) {
				let newfjParam = this.fjParam;
				if (newfjParam != undefined) {
					if (newfjParam.type != undefined) {
						if (newfjParam.type != '') {
							let list = newfjParam.type.split(",");
							if (list.length > 0) {
								if (list.indexOf(files.raw.type) == -1) {
									this.message(
										"请上传" +
										list +
										"类型文件,你上传的文件类型为" +
										files.raw.type,
										3
									);
									return false;
								}
							}
						}
					}
				}
				if (fileList.length > 0) {
					this.fileList = [fileList[fileList.length - 1]];
				}
				this.form.fileName = this.fileList[0].name;
				this.file = files.raw;
			},
			submitUpload() {
				if (this.isBrowse) {
					return false;
				}
				var formData = new FormData();
				if (!this.form.fileName) {
					this.message("请选择需要上传的文件！", 3);
					return false;
				}
				formData.append("id", this.id);
				formData.append("mid", this.mid);
				formData.append("tableName", this.tableName);
				formData.append("fieldName", this.fieldName);
				formData.append("gcId", this.gcId);
				formData.append("xmId", this.xmId);
				formData.append("deptId", this.deptId);
				formData.append("fjParam", JSON.stringify(this.fjParam));
				if (this.form.note !== null) {
					formData.append("note", this.form.note);
				}
				if (this.type !== null) {
					formData.append("docType", this.form.docType);
				}
				formData.append("file", this.file);
				if (this.id) {
					fileUpdata(formData).then((res) => {
						if (res.success) {
							if (res.code == 200) {
								this.$emit("hide");
								this.message(res.msg, 1);
								this.$emit("query", this.mid);
							} else {
								this.message(res.msg, 3);
							}
						} else {
							this.message(res.msg, 3);
							this.$emit("query", this.mid);
						}
					});
				} else {
					fileAdd(formData).then((res) => {
						if (res.success) {
							if (res.code == 200) {
								this.$emit("hide");
								this.message(res.msg, 1);
								this.$emit("query", this.mid);
							} else {
								this.message(res.msg, 3);
							}
						} else {
							this.message(res.msg, 3);
							this.$emit("query", this.mid);
						}
					});
				}
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			load() {
				if (this.id) {
					fileDetail({
						id: this.id
					}).then((res) => {
						if (res.success) {
							this.form = res.info;
							this.form.docType = this.fileType;
						}
					});
				} else {
					this.form.fileName = "";
					this.form.note = "";
					this.form.docType = this.fileType;
				}
			},
			close() {
				this.windowShow = false;
				setTimeout(() => {
					this.$emit("hide");
					this.$emit("query", this.mid);
				}, 400);
			},
		},
		created: function() {},
		mounted: function() {
			this.address = this.api + "fileCommon/add";
			this.load(this.id);
		},
	};
</script>

<style scoped>
	.content {
		width: 100%;
		height: calc(100% - 112px);
		padding: 16px 16px 0 16px;
	}

	.footer {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 64px;
		padding: 16px;
	}

	>>>.businessInput.mini .el-input__inner {
		padding-right: 30px !important;
	}

	>>>.el-textarea__inner {
		min-height: 136px !important;
		height: 136px !important;
	}
</style>
<style>
</style>
